<template>
	<view class="folder-list">
		<checkbox-group @change="checkboxChange">
			<label class="list-item theme-bg-active" v-for="(item,index) in list" :key="index" @longtap="longtapCheck(item)"
			 @tap="navigateToFn(item)">
				<view class="i-left" v-if="isCheckbox">
					<checkbox :value="JSON.stringify(item)" :checked="item.checked" />
				</view>
				<view class="i-left">
					<image v-if="item.suffix" :src="computedFileType(item)"></image>
					<image v-else src="/static/image/filemanag/wenjianja.png"></image>
				</view>
				<view class="i-center">
					<view class="i-center-top lz-ellipsis-1">{{item.filingName}}{{item.suffix?'.'+item.suffix:''}}</view>
					<view class="i-center-bottom">
						<text v-if="item.suffix">{{computeFileSize(item.fileSize)}}</text><text v-if="item.suffix">·</text><text>{{ computeTime(item) }}</text>
						<u-tag :text="item.user&&item.user.name" size="mini" shape="circle" :type="item.user.id==JSON.parse(userInfo).id?'success':'primary'" />
					</view>
				</view>
				<view class="i-right" @click.stop="ThemeFn(item)">
					<uni-icons type="settings" color="#00aaff"></uni-icons>
				</view>
			</label>
		</checkbox-group>
		<!-- <u-empty text="暂无数据" class="u-empty" mode="data" v-if="list.length==0" :margin-top="10"></u-empty> -->
		<view class="folder-footer theme-bg theme-border-top-auto theme-border-bottom-auto" :style="{bottom:footerBotttom}"
		 v-if="isCheckbox">
			<view class="foot-item" @click="initFn">取消</view>
			<view class="foot-item" @click="checkboxChangeAll">{{checkbox.isSelectText}}</view>
			<view class="foot-item" :class="checkbox.checkboxList.length==0?'foot-item-wei':''" @click="moveTo()">移动</view>
			<view class="foot-item" :class="checkbox.checkboxList.length==0?'foot-item-wei':''" @click="deleteFile()">删除</view>
		</view>
		<image class="qssImage" v-if="qss.animate_jiami" src="/static/image/qss/jiami.gif"></image>
		<image class="qssImage" v-if="qss.animate_jiemi" src="/static/image/qss/jiemi.gif"></image>
	</view>
</template>

<script>
	let that
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		components: {
		},
		computed: {
			...mapGetters(['APPTheme', 'userInfo', 'api']),
			//计算图片属性
			computedFileType() {
				let that = this
				return (item) => {
					return that.$lizhao.lzfile.lzGetFileType(item.suffix)
				}
			},
			//计算文件大小
			computeFileSize() {
				let that = this
				return (size) => {
					return that.$lizhao.lzfile.lzGetFileSize(size)
				}
			},
			//计算时间
			computeTime(){
				let that = this
				return (item) => {
					let reg=new RegExp('-','g')//g代表全部
					let createDate =item.createDate.replace(reg,"/");
					let time=new Date(createDate).getTime()
					return that.$lizhao.timeFrom(time,'yyyy-mm-dd hh:MM:ss')
				}
			}
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			//是否开启长按多选功能
			showCheckbox: {
				type: Boolean,
				default: false
			},
			//局部滚动高度
			scrollHeight: {
				type: String,
				default: '100%'
			},
			//底部操作菜单位置
			footerBotttom: {
				type: String,
				default: '0'
			},
		},
		data() {
			return {
				isCheckbox: false, //是否启用多选
				//多选
				checkbox: {
					isSelectAll: false, //是否全选
					isSelectText: "全选",
					list: [], //列表
					checkboxList: [], //已选择的列表
				},
				//点击菜单
				menu: {
					data: uni.getStorageSync('folder_menu_data') || null, //当前点击行参数
				},
				qss:{
					animate_jiami:false,
					animate_jiemi:false,
				},
			}
		},
		mounted() {
			that=this
		},
		methods: {
			//初始化
			initFn() {
				let that = this
				that.isCheckbox = false
				// true禁用下拉刷新，false启用
				that.$emit('lockDownScroll',false)
			},
			longtapCheck(item) {
				let that = this
				if (that.showCheckbox) { //当前是否开启多选
					that.isCheckbox = true
					that.menu.data = item
					//存储下当前点击的信息，否则$on函数触发后that.menu.data值会还原【组件中存在的现象】
					uni.setStorageSync('folder_menu_data', item)
					// true禁用下拉刷新，false启用
					that.$emit('lockDownScroll',true)
				}
			},
			// 多选
			checkboxChange(e) {
				let that = this
				that.checkbox.checkboxList = e.detail.value.map(item => {
					return JSON.parse(item)
				})
				console.log(that.checkbox.checkboxList);
			},
			//查看详情
			navigateToFn(item) {
				let that = this
				try {
					//先隐藏原生子窗口否则有问题
					//#ifdef APP-PLUS
					uni.getSubNVueById('docDrawer').hide();
					//#endif
				} catch (e) {
					//TODO handle the exception
				}
			
				if (that.isCheckbox) {
					return
				}
				console.log(item)
				if (item.fileType == 0) { //文件夹
					uni.navigateTo({
						url: '/pages/document/folder/folder?option=' + JSON.stringify(item),
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else if (item.fileType == 1) { //word
					//打开文件
					that.openDocument(item)
				}else if (item.fileType == 2){//excl
					//打开文件
					that.openDocument(item)
				}else if (item.fileType == 3){//其他文件
					/*
					只有加密盘fileType为3时可能为其他文件，共享盘和私密盘上传只能上传图片，所以3为图片
					filingType 2为加密盘
					*/
					if(item.filingType=='2'){
						//#ifdef APP-PLUS
							//gk量子解密
							that.gk_Qss_decryption(item)
						//#endif
						//#ifdef H5
							uni.showToast({
								title: '量子解密仅支持手机端',
								icon:"none"
							});
						//#endif
					}else{
						that.previewImage([that.GLOBAL.wps_svr + item.filePath])
					}
					
				}
			
			},
			//gk量子解密
			async gk_Qss_decryption(item){
				console.log(item);
				//开启解密动画
				that.qss.animate_jiemi=true
				//需要传入解密的字符串和秘钥secretKey【附件解密】
				let base64=await that.$lizhao.QSS.SM4DecryptBigDataEnclosure(that.GLOBAL.image_svr + item.filePath,item.secretKey)
				if(!base64){//解密异常
					//关闭解密动画
					that.qss.animate_jiemi=false
					return
				}
				//获取文件类型
				let type=that.$lizhao.lzfile.lzGetTypeSuffix(item.suffix)
				if(type=='image'||type=='video'||type=='audio'){
					/**
					 * 实现思路：
					 * 视频和音频拿到base64，可通过h5方式将base64转成blob对象
					 * 再通过URL.createObjectURL(blob)生成指向File对象或Blob对象的URL，
					 * 此url可以放到大部分标签下的src中进行渲染，如img，video，audio
					 * */
					uni.navigateTo({url: '/pages/document/filePlay/filePlay?type='+type+'&base64='+encodeURIComponent(base64)});
					//关闭解密动画
					that.qss.animate_jiemi=false
				}else if(type=='word'){
					/**
					 * 实现思路：
					 * 通过native.js的io操作创建文件，拿到平台绝对路径
					 * 再通过原生类进行base64解码，拿到字节流bytes数组
					 * 在通过java类FileOutputStream进行文件写入bytes返回文件路径path
					 * 在通过plus.runtime.openFile(path);用第三方程序打开文件
					 * */
					// 写入字节输出流传入base64和要写入的文件名称如lizhao222.doc
					let path=await that.$lizhao.lzfile.lzFileWriter(base64,item.filingName)
					console.log(path);
					plus.runtime.openFile(path);
					//关闭解密动画
					that.qss.animate_jiemi=false
				}
				
			},
			//图片查看
			previewImage(imageList){
				// 预览图片
				uni.previewImage({
					urls: imageList,
				});
			},
			//打开文件
			openDocument(item) {
				uni.showLoading({
					title: '文件打开中...',
					mask: false
				});
				console.log(that.GLOBAL.wps_svr + item.filePath);
				uni.downloadFile({
					url: that.GLOBAL.wps_svr + item.filePath,
					success: function(res) {
						console.log(res);
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log('打开文档成功');
								uni.hideLoading()
							},
							fail(error) {
								uni.hideLoading()
								uni.showToast({
									title: '打开失败',
									icon: 'none'
								});
							}
						});
					},
					fail(error) {
						console.log(error);
						uni.hideLoading()
						uni.showToast({
							title: '打开失败',
							icon: 'none'
						});
					}
				});
			},
			//全选
			checkboxChangeAll() {
				let that = this
				if (that.checkbox.isSelectAll) { //取消全选
					that.$set(that.checkbox, 'isSelectAll', false)
					that.checkbox.isSelectText = '全选'
					console.log('取消全选');
					that.list.map(res => {
						that.$set(res, 'checked', false)
					})
					console.log(that.list);
					that.checkbox.checkboxList=[]
				} else { //全选
					that.$set(that.checkbox, 'isSelectAll', true)
					that.checkbox.isSelectText = '取消全选'
					that.list.map(res => {
						that.$set(res, 'checked', true)
					})
					console.log(that.list);
					that.checkbox.checkboxList=that.list
				}
			},
			//点击操作菜单
			ThemeFn(item) {
				let that = this
				that.$emit('showPopup',item)
			},
			//移动到
			moveTo() {
				let that = this
				if(that.checkbox.checkboxList.length==0){
					return
				}
				//初始化
				that.initFn()
				let checkboxListId = that.checkbox.checkboxList.map(item => {
					return item.id
				})
				that.menu.data.parentId='-1'//从根目录向下选择移动
				let req = {
					menu: that.menu.data,
					checkboxListId: checkboxListId //已选择的文件id
				}
				uni.navigateTo({
					url: '/pages/document/folderMove/folderMove?option=' + encodeURIComponent(JSON.stringify(req)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//删除文件及文件夹
			deleteFile() {
				let that = this
				if(that.checkbox.checkboxList.length==0){
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认将文件移入到回收站？',
					success: function(res) {
						if (res.confirm) {
							let checkboxListId = that.checkbox.checkboxList.map(item => {
								return item.id
							})
							let req = {
								ids: checkboxListId, //文件名
							}
							that.GLOBAL.doGet(that.api.GLOBAL_admin_rest_biz_filingCabinets_delete, req).then(res => {
								if (res.code == '0') {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
									if (res.data.flag) {
										//更新父级列表
										that.$emit('triggerDownScroll', true)
										that.isCheckbox = false
									}
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			
		}
	}
</script>
<style scoped lang="scss">
	@import './good-list.scss';
	.qssImage{
		position: fixed;top: 0;bottom: 0;left: 0;right: 0;height: 800rpx;width: 100%;margin: auto;
	}
</style>
